import Taro, {Component} from "@tarojs/taro";
import {View, Image, Text, ScrollView} from "@tarojs/components";
import {toJS} from 'mobx'
import {inject, observer} from '@tarojs/mobx'
import {IStoreProps} from '../../store/Stores'
import {getRuntime, pageSize, getAvatar, getSimpleTime, partOf, typeOfJob} from '../../utils/common'

import './index.less'

// 最新消息
interface IHomeProps extends IStoreProps {
}

@inject("stores")
@observer
class Personnel extends Component<IHomeProps> {
  constructor(props) {
    super(props)
  }

  state = {
    currentNavId: null, // 全部
    pageIndex: 1,
    pageSize: pageSize,
    items: [],
    totalCount: 0,
    navArr: [
      {id: 1, name: '需求'},
      {id: 2, name: '服务'},
      {id: 4, name: '人才'},
      {id: 3, name: '招聘'},
    ]
  }

  componentDidShow(): void {
    Taro.setNavigationBarTitle({ title:'最新消息' })
    this.getAllInfomations()
  }

  getAllInfomations() {
    let {homeStore} = this.props.stores
    let {currentNavId, pageIndex, pageSize} = this.state
    homeStore.getAllInfomations({
      formPublicationType: currentNavId,
      pageIndex,
      pageSize,
      callback: home => {
        // console.log(home)
        if (pageIndex === 1) {
          this.setState({
            totalCount: toJS(home.totalCount),
            items: toJS(home.items)
          },() => {
            // 职位详情页使用
            getRuntime().setStorage('positionInfo',this.state.items)
          })
        }else {
          const { items } = this.state;
          items.push(...home.items || []);
          this.setState({
            totalCount: home.totalCount,
            items
          }, () => {
            // 职位详情页使用
            getRuntime().setStorage('positionInfo',this.state.items)
          })
        }

      }
    })
  }


  onReachBottom(): void {
    let {totalCount, pageSize, pageIndex} = this.state
    const {loading} = this.props.stores.homeStore;
    if (totalCount > pageIndex * pageSize && !loading) {
      this.setState({
        pageIndex: pageIndex + 1
      }, () => {
        this.getAllInfomations()
      })
    }
  }

  handelRouter(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  changeNavId(id: any = null) {
    this.setState({
      currentNavId: id,
      items: [],
      pageIndex: 1,
    }, () => {
      this.getAllInfomations()
    })
  }

  link(url: string) {
    window.location.href = url
  }

  render() {
    let {currentNavId, navArr, items} = this.state
    return (
      <View className='newest-index'>
        <ScrollView className='scroll-view-nav' scrollX={true}>
          <View className={!currentNavId ? 'scroll-item scroll-item-on' : 'scroll-item'}
                onClick={this.changeNavId.bind(this, null)}><Text className='line'/>全部</View>
          {
            navArr.map(item => {
              return (
                <View className={item.id === currentNavId ? 'scroll-item scroll-item-on' : 'scroll-item'}
                      onClick={this.changeNavId.bind(this, item.id)}><Text className='line'/>{item.name}</View>
              )
            })
          }
        </ScrollView>

        {
          items.length > 0 &&
          items.map(item => {
            let tpl = null
            switch (item.publicationType) {
              case 1: {
                tpl = <View className='list-11-item'
                            onClick={this.handelRouter.bind(this, '/pages/newest/demand_detail?id=' + item.id)}>
                  <View className='line'>
                    <View className={'l'}>
                      <Image className={'pic'} src={getAvatar(item.userLogoImg)}/>
                      <View>
                        <View className='name'>{item.userNickName}</View>
                        <View className='list-info'>{getSimpleTime(item.creationTime)}</View>
                      </View>
                    </View>
                    <View className='r type-demand'>需求</View>
                  </View>
                  <View className={'title'}>
                    {partOf(item.description, 40)}
                  </View>
                  <View className='list-info'>{item.numberOfVisits}次浏览</View>
                </View>
                break
              }
              case 2: {
                tpl = <View className='list-11-item'
                            onClick={this.handelRouter.bind(this, '/pages/newest/service_detail?id=' + item.id)}>
                  <View className='line'>
                    <View className={'l'}>
                      <Image className={'pic'} src={getAvatar(item.userLogoImg)}/>
                      <View>
                        <View className='name'>{item.userNickName}</View>
                        <View className='list-info'>{getSimpleTime(item.creationTime)}</View>
                      </View>
                    </View>
                    <View className='r type-services'>服务</View>
                  </View>
                  <View className={'title'}>
                    {partOf(item.description, 40)}
                  </View>
                  <View className='list-info'>{item.numberOfVisits}次浏览</View>
                </View>
                break
              }
              case 3: {
                tpl = <View className='list-12-item'
                            onClick={this.handelRouter.bind(this, '/pages/newest/position_detail?id=' + item.id)}>
                  <View className='line'>
                    <View className={'l'}>
                      <Text className={'label'}>{item.jobNature}</Text>
                      <Text className={'title'}>{item.positionName}</Text>
                    </View>
                    <View className='r type-position'>招聘</View>
                  </View>
                  <View className={'price'}>
                    {item.monthlyPay}
                  </View>
                  <View className='info'>
                    <View className='date list-info'>
                      <Text className='op label-text'>{item.education}</Text>
                      <Text className='op label-text'>{item.recruitment}人</Text>
                      {/*<Text className='op label-text'>{item.workYears}年</Text>*/}
                      <Text className='op label-text brnone'>{item.address}</Text>
                    </View>
                    <Text className='date list-info'>{item.numberOfVisits}次浏览</Text>
                  </View>
                </View>
                break
              }
              case 4: {
                tpl = <View className='list-12-item'
                            onClick={this.handelRouter.bind(this, '/pages/newest/personnel_detail?id=' + item.id)}>
                  <View className='line'>
                    <View className={'l'}>
                      <Text className={'label'}>{typeOfJob(item.typeOfJob)}</Text>
                      <Text className={'title'}>{item.positionName}</Text>
                    </View>
                    <View className='r type-resume'>人才</View>
                  </View>
                  <View className='price'>
                    {item.monthlyPay}
                  </View>
                  <View className={'info'}>
                    <View className={'date list-info'}>
                      <Text className='op label-text'>{item.education}</Text>
                      <Text className='op label-text brnone'>{item.technicalTitle}</Text>
                    </View>
                    <Text className='date list-info'>{item.numberOfVisits}次浏览</Text>
                  </View>
                </View>
                break
              }
            }
            return tpl
          })
        }
        {items.length <= 0 && <View className='page-none-info'>已经没有更多信息了</View>}
      </View>
    )
  }
}

export default Personnel
